<template>
    <div class="comment_item">
        <div class="ques_user">
          <div class="photo">
            <img :src="item.userPhoto" alt>
          </div>
          <span>{{item.userName}}</span>
        </div>
        <div class="asked_info">
          <p class="ques_text">{{item.userContent}}</p>
          <p class="master_hui">{{item.masterReply}}</p>
          <div class="dashi_huo" v-if="!!!item.masterReply">
            <em class="huo"></em>解答大师
          </div>
          <div class="asked_user" @click="lookMaster(item.masterId)">
            <div class="user_info">
              <div class="left_info">
                <div class="photo">
                  <img :src="item.masterPhoto" alt>
                </div>
              </div>
              <div class="right_info">
                <h5>
                  {{item.masterName}}
                  <span>{{item.grade}}</span>
                </h5>
                <p v-html="item.content"></p>
              </div>
            </div>
            <div class="asked_time">
              <p>{{item.masterReplyTime}}</p>
            </div>
          </div>
        </div>
      </div>
</template>

<script>
    export default {
        name: 'estimate',
        props: {
            item: Object
        },
        data() {
            return {

            }
        },
        methods: {
            lookMaster(id){
                this.$router.push({
                    path: '/mdetail',
                    query: {
                        id:id
                    }
                })
            },
        }
    }
</script>

<style lang="less" scoped>
.comment_item {
      border-bottom: 0.266667rem solid rgba(242, 242, 242, 1);
      padding: 0.253333rem 0.266667rem 0.266667rem 0.36rem;
      width: 100%;
      box-sizing: border-box;
      .photo {
        width: 0.746667rem;
        height: 0.746667rem;
        border-radius: 0.133333rem;
        overflow: hidden;
        margin-right: 0.266667rem;
        img {
          width: 100%;
        }
      }
      .ques_user {
        margin-bottom: 0.17rem;
        .flex();
        .align-items(center);
        font-size: 0.4rem;
        color: #333;
      }
      .asked_info {
        padding-left: 0.986667rem;
        p.ques_text {
          padding-bottom: 0.3rem;
          margin-bottom: 0.266667rem;
          border-bottom: 1px solid rgba(242, 242, 242, 1);
          color: #333;
          font-size: 0.34rem;
          line-height: 0.4rem;
        }
        p.master_hui{
          margin-bottom: 0.266667rem;
          font-size: 0.34rem;
        }
        .dashi_huo {
          color: #333;
          font-size: 0.4rem;
          margin-bottom: 0.373333rem;
          em {
            width: 0.346667rem;
            height: 0.413333rem;
            display: inline-block;
            margin-right: 0.266667rem;
            background: url("../assets/question/huo.png") no-repeat center;
            background-size: contain;
          }
        }
        .asked_user {
          background: rgba(248, 248, 248, 1);
          border-radius: 0.133333rem;
          padding: 0.266667rem;
          box-sizing: border-box;
          .user_info {
            width: 100%;
            .flex();
            div.left_info {
              .photo {
                width: 1.213333rem;
                height: 1.213333rem;
                border-radius: 0.133333rem;
                overflow: hidden;
                img {
                  width: 100%;
                }
              }
            }
            .right_info {
              padding-left: 0.24rem;
              h5 {
                font-weight: normal;
                font-size: 0.4rem;
                color: #333;
                .flex();
                .align-items(center);
                span {
                  display: inline-block;
                  font-size: 0.48rem;
                  color: #fff;
                  background: #fead58;
                  width: 1.28rem;
                  text-align: center;
                  line-height: 0.746667rem;
                  transform-origin: 0 50%;
                  transform: scale(0.5);
                  -webkit-transform-origin: 0 50%;
                  -webkit-transform: scale(0.5);
                  height: 0.746667rem;
                  border-radius: 0.066667rem;
                  margin-left: 0.146667rem;
                  font-style: normal;
                  // margin-left: .28rem;
                  // width:.64rem;
                  // height:.373333rem;
                  // text-align: center;
                  // line-height: .373333rem;
                  // background:rgba(254,173,88,1);
                  // border-radius:2px;
                  // font-size: .24rem;
                  // color: #fff;
                }
              }
              p {
                font-size: 0.32rem;
                line-height: 1.5;
                color: rgba(102, 102, 102, 1);
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                overflow: hidden;
                -webkit-box-orient: vertical;
              }
            }
          }
          .asked_time {
            color: rgba(153, 153, 153, 1);
            font-size: 0.24rem;
          }
        }
      }
    }
</style>
